Toggle

x-toggle

An animated switch control for boolean settings, with label, description, and three sizes. Works with wire:model. Announced as a switch (role="switch" on the underlying checkbox) to assistive technology.

php artisan components:add toggle

Playground

label description checked disabled size

Examples

Sizes

Three sizes, with label and description.

<div class="flex w-full max-w-md flex-col gap-4">
    <x-components.toggle label="Public profile" description="Anyone can view your page." checked />
    <x-components.toggle label="Two-factor auth" size="sm" />
    <x-components.toggle label="Large switch" size="lg" checked />
</div>

Props

Prop	Type	Default	Description
`label`	text	`—`	Label text shown next to the toggle.
`description`	text	`—`	Secondary helper text under the label.
`checked`	boolean	`false`	Whether the toggle starts on.
`disabled`	boolean	`false`	Disable the toggle.
`size`	select sm · md · lg	`md`	The size of the switch.